<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号文章编辑器</title>
    <link href="css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333333;
            line-height: 1.6;
            height: 100vh;
            overflow: hidden;
        }
        
        .flex {
            display: flex;
        }
        
        .flex-1 {
            flex: 1;
        }
        
        .min-h-screen {
            min-height: 100vh;
        }
        
        main {
            display: flex;
            height: 100vh;
        }
        
        .toolbar-panel {
            width: 240px;
            background-color: white;
            border-right: 1px solid #e5e7eb;
            padding: 20px;
            overflow-y: auto;
        }
        
        .toolbar-section {
            margin-bottom: 30px;
        }
        
        .toolbar-title {
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .toolbar-title i {
            margin-right: 8px;
            color: #4e8cff;
        }
        
        .toolbar-group {
            display: flex;
            flex-wrap: nowrap;
            border-bottom: 1px solid #e5e7eb;
            padding: 10px 0;
            margin-bottom: 10px;
        }
        
        .toolbar-btn {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            border: none;
            background: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            margin: 0 2px 4px;
        }
        
        .toolbar-btn:hover {
            background-color: #f3f4f6;
        }
        
        .toolbar-btn.active {
            background-color: rgba(78, 140, 255, 0.1);
            color: #4e8cff;
        }
        
        .toolbar-separator {
            width: 1px;
            height: 24px;
            background-color: #d1d5db;
            margin: 0 4px;
            display: inline-block;
        }
        
        .setting-group {
            margin-bottom: 20px;
        }
        
        .setting-label {
            display: block;
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 6px;
        }
        
        select, input[type="range"] {
            width: 100%;
            padding: 6px 8px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #9ca3af;
            margin-top: 4px;
        }
        
        .editor-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e5e7eb;
        }
        
        .panel-header {
            padding: 12px 20px;
            background-color: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
            font-weight: 500;
            color: #4b5563;
        }
        
        .editor-container {
            flex: 1;
            padding: 20px;
            background-color: white;
            overflow-y: auto;
        }
        
        #article-editor {
            margin: 0 auto;
            min-height: 500px;
            padding: 20px;
            max-width: 680px;
            background-color: #fff;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }
        
        .preview-panel {
            width: 380px;
            background-color: #f3f4f6;
            display: flex;
            flex-direction: column;
        }
        
        .preview-container {
            padding: 20px;
        }
        
        .phone-mockup {
            width: 320px;
            background-color: #000;
            border-radius: 36px;
            padding: 18px 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        
        .phone-screen {
            background-color: white;
            border-radius: 24px;
            height: 568px;
            overflow-y: auto;
            padding: 16px;
        }
        
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            display: none;
        }
        
        .modal {
            background-color: white;
            border-radius: 8px;
            width: 100%;
            max-width: 400px;
            padding: 24px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .modal-body {
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 6px;
        }
        
        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .btn-default {
            border: 1px solid #d1d5db;
            background-color: white;
            color: #374151;
        }
        
        .btn-primary {
            background-color: #4e8cff;
            color: white;
            border: none;
        }
        
        /* 公众号文章样式 - 确保复制到公众号编辑器后样式不变 */
        .article-title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 16px;
            line-height: 1.4;
            text-align: center;
            color: #333;
        }
        
        .divider {
            width: 100%;
            height: 1px;
            background-color: #e5e7eb;
            margin: 24px 0;
        }
        
        .divider-dot {
            display: flex;
            align-items: center;
            margin: 24px 0;
        }
        
        .divider-dot::before,
        .divider-dot::after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #e5e7eb;
        }
        
        .divider-dot span {
            padding: 0 12px;
            color: #9ca3af;
            font-size: 12px;
        }
        
        .article-content p {
            margin-bottom: 24px;
            font-size: 16px;
            color: #333;
            line-height: 1.75;
            text-align: justify;
        }
        
        .article-image {
            width: 100%;
            border-radius: 8px;
            margin: 32px 0;
        }
        
        .image-caption {
            font-size: 14px;
            color: #6b7280;
            text-align: center;
            margin-top: -28px;
            margin-bottom: 24px;
        }
        
        .subtitle {
            font-size: 18px;
            font-weight: bold;
            margin: 36px 0 16px;
            padding-left: 4px;
            border-left: 3px solid #4e8cff;
            color: #333;
        }
        
        .quote {
            background-color: #f5f7fa;
            border-left: 3px solid #4e8cff;
            padding: 16px 18px;
            margin: 24px 0;
            font-size: 15px;
            color: #6b7280;
        }
        
        .article-list {
            margin: 24px 0 24px 20px;
        }
        
        .article-list li {
            margin-bottom: 12px;
            font-size: 16px;
            line-height: 1.75;
        }
        
        .fixed-buttons {
            position: fixed;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 100;
        }
        
        .fixed-btn {
            padding: 12px 16px;
            background-color: #4e8cff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }
        
        .fixed-btn:hover {
            background-color: #3a7cff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        .fixed-btn:active {
            transform: translateY(0);
        }
        
        @media (max-width: 1024px) {
            .preview-panel {
                display: none;
            }
            
            .toolbar-panel {
                width: 200px;
            }
            
            .fixed-buttons {
                right: 10px;
            }
        }
        
        @media (max-width: 768px) {
            main {
                flex-direction: column;
            }
            
            .toolbar-panel {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #e5e7eb;
                max-height: 300px;
            }
            
            .toolbar-group {
                display: flex;
                flex-wrap: wrap;
            }
            
            .fixed-buttons {
                position: relative;
                right: auto;
                top: auto;
                transform: none;
                flex-direction: row;
                justify-content: center;
                margin: 20px 0;
            }
        }
    </style>
</head>
<body>
    <div class="min-h-screen flex flex-col">
        <main class="flex-1 flex flex-col md:flex-row">
            <div class="toolbar-panel">
                <div class="toolbar-section">
                    <h3 class="toolbar-title">
                        <i class="fa fa-sliders"></i>样式设置
                    </h3>
                    
                    <div class="setting-group">
                        <label class="setting-label">标题样式</label>
                        <select id="title-style">
                            <option value="default">默认标题</option>
                            <option value="large">大号标题</option>
                            <option value="bold">加粗标题</option>
                            <option value="light">浅色标题</option>
                        </select>
                    </div>
                    
                    <div class="setting-group">
                        <label class="setting-label">段落间距</label>
                        <input type="range" id="paragraph-spacing" min="16" max="40" value="24">
                        <div class="range-labels">
                            <span>小</span>
                            <span>大</span>
                        </div>
                    </div>
                    
                    <div class="setting-group">
                        <label class="setting-label">行高</label>
                        <select id="line-height">
                            <option value="1.5">1.5倍</option>
                            <option value="1.75" selected>1.75倍</option>
                            <option value="2">2倍</option>
                            <option value="2.25">2.25倍</option>
                        </select>
                    </div>
                    
                    <div class="setting-group">
                        <label class="setting-label">图片圆角</label>
                        <input type="range" id="image-radius" min="0" max="16" value="8">
                    </div>
                </div>
            </div>

            <div class="editor-panel">
                <div class="panel-header">
                    <h3>编辑区域</h3>
                    <div class="toolbar-group">
                        <button class="toolbar-btn" data-command="formatBlock" data-value="<h1>" title="标题1">
                            <i class="fa fa-header"><sub>1</sub></i>
                        </button>
                        <button class="toolbar-btn" data-command="formatBlock" data-value="<h2>" title="标题2">
                            <i class="fa fa-header"><sub>2</sub></i>
                        </button>
                        <button class="toolbar-btn" data-command="formatBlock" data-value="<p>" title="段落">
                            <i class="fa fa-paragraph"></i>
                        </button>
                        <span class="toolbar-separator"></span>
                        <button class="toolbar-btn" data-command="bold" title="加粗">
                            <i class="fa fa-bold"></i>
                        </button>
                        <button class="toolbar-btn" data-command="italic" title="斜体">
                            <i class="fa fa-italic"></i>
                        </button>
                        <button class="toolbar-btn" data-command="underline" title="下划线">
                            <i class="fa fa-underline"></i>
                        </button>
                        <button class="toolbar-btn" data-command="foreColor" data-value="#e63946" title="强调色">
                            <i class="fa fa-font text-accent"></i>
                        </button>

                        <button class="toolbar-btn" data-command="formatBlock" data-value="<blockquote>" title="引用">
                            <i class="fa fa-quote-right"></i>
                        </button>
                        <button class="toolbar-btn" data-command="insertUnorderedList" title="无序列表">
                            <i class="fa fa-list-ul"></i>
                        </button>
                        <button class="toolbar-btn" data-command="insertOrderedList" title="有序列表">
                            <i class="fa fa-list-ol"></i>
                        </button>
                        <span class="toolbar-separator"></span>
                        <button class="toolbar-btn" data-command="justifyLeft" title="左对齐">
                            <i class="fa fa-align-left"></i>
                        </button>
                        <button class="toolbar-btn" data-command="justifyCenter" title="居中对齐">
                            <i class="fa fa-align-center"></i>
                        </button>
                        <button class="toolbar-btn" data-command="justifyRight" title="右对齐">
                            <i class="fa fa-align-right"></i>
                        </button>
                        <button id="insert-image" class="toolbar-btn" title="插入图片">
                            <i class="fa fa-image"></i>
                        </button>
                        <button id="insert-divider" class="toolbar-btn" title="插入分割线">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button id="insert-dot-divider" class="toolbar-btn" title="插入点分隔线">
                            <i class="fa fa-ellipsis-h"></i>
                        </button>
                        <span class="toolbar-separator"></span>
                        <button id="add-summary" class="toolbar-btn" title="添加摘要">
                            <i class="fa fa-file-text-o"></i>
                        </button>
                        <button id="add-guide" class="toolbar-btn" title="添加引导区">
                            <i class="fa fa-lightbulb-o"></i>
                        </button>
                    </div>
                </div>

                <div class="editor-container">
                    <div id="article-editor" contenteditable="true">
                        <h1 class="article-title">如何打造一篇让人眼前一亮的公众号文章排版</h1>
                        
                        <div class="divider"></div>
                        
                        <div class="article-content">
                            <p style="text-indent: 2em; margin-bottom: 24px;">好的排版不是炫技，而是让读者更舒适地获取信息。在微信公众号的阅读场景中，用户更偏爱简洁、清晰、有呼吸感的排版设计。</p>
                            
                            <img src="img/BG-YouthDay.png" alt="公众号排版示例" class="article-image">
                            <p class="image-caption">图1：优秀公众号排版的视觉层次展示</p>
                            
                            <div class="divider-dot">
                                <span>●●●</span>
                            </div>
                            
                            <h2 class="subtitle">一、基础排版原则</h2>
                            
                            <p style="text-indent: 2em; margin-bottom: 24px;">无论是哪种类型的文章，都需要遵循几个核心原则：</p>
                            
                            <div class="quote">
                                排版的本质是信息的梳理，让读者能快速抓住重点，减少阅读阻力。
                            </div>
                            
                            <ul class="article-list">
                                <li><strong>留白原则</strong>：行间距保持1.75-2倍，段落间留空行</li>
                                <li><strong>一致性原则</strong>：全文字体、颜色、间距保持统一</li>
                                <li><strong>层次分明</strong>：通过字号和颜色区分标题与正文</li>
                                <li><strong>移动端优先</strong>：避免过宽段落和过小字体</li>
                            </ul>
                            
                            <h2 class="subtitle">二、字体选择与字号搭配</h2>
                            
                            <p style="text-indent: 2em; margin-bottom: 24px;">在微信公众号中，字体选择相对有限，但字号搭配却大有讲究。合适的字号搭配能让文章层次更加清晰。</p>
                            
                            <div class="quote">
                                标题字号建议在18-22px之间，正文字号建议在15-17px之间，注释字号建议在13-14px之间。
                            </div>
                            
                            <h2 class="subtitle">三、色彩运用技巧</h2>
                            
                            <p style="text-indent: 2em; margin-bottom: 24px;">色彩在公众号排版中扮演着重要角色，合理的色彩搭配能够提升阅读体验。</p>
                            
                            <ul class="article-list">
                                <li><strong>主色调</strong>：选择一种主色调，用于标题、重点内容等</li>
                                <li><strong>辅助色</strong>：选择1-2种辅助色，用于强调、引用等</li>
                                <li><strong>中性色</strong>：使用灰色系作为正文颜色，避免纯黑色</li>
                            </ul>
                            
                            <h2 class="subtitle">四、图片与多媒体</h2>
                            
                            <p style="text-indent: 2em; margin-bottom: 24px;">图片和多媒体的合理运用能够大大提升文章的吸引力。</p>
                            
                            <div class="quote">
                                图片宽度建议为900px，高度根据内容需要调整，保持图片清晰度。
                            </div>
                            
                            <h2 class="subtitle">五、引导与互动设计</h2>
                            
                            <p style="text-indent: 2em; margin-bottom: 24px;">良好的引导和互动设计能够增加读者参与度，提升文章传播效果。</p>
                            
                            <ul class="article-list">
                                <li><strong>文末引导</strong>：添加作者介绍、往期推荐等</li>
                                <li><strong>互动环节</strong>：设置投票、留言互动等</li>
                                <li><strong>分享引导</strong>：鼓励读者分享文章</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="preview-panel">
                <div class="panel-header">
                    <h3>手机预览</h3>
                    <p style="font-size: 12px; font-weight: normal; margin-top: 4px;">模拟微信公众号阅读效果</p>
                </div>
                <div class="preview-container">
                    <div class="phone-mockup">
                        <div class="phone-screen">
                            <div id="preview-content">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <div class="fixed-buttons">
        <button class="fixed-btn" id="zoom-in">
            <i class="fa fa-search-plus"></i> 
        </button>
        <button class="fixed-btn" id="zoom-out">
            <i class="fa fa-search-minus"></i> 
        </button>
        <button class="fixed-btn" id="export-image">
            <i class="fa fa-camera"></i> 
        </button>
    </div>

    <div id="image-modal" class="modal-backdrop">
        <div class="modal">
            <h3 class="modal-title">插入图片</h3>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">图片URL</label>
                    <input type="text" id="image-url" placeholder="https://via.placeholder.com/680x400" 
                           class="form-control" value="img/BG-YouthDay.png">
                </div>
                <div class="form-group">
                    <label class="form-label">图片说明（可选）</label>
                    <input type="text" id="image-caption" placeholder="添加图片说明..." 
                           class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancel-image" class="btn btn-default">取消</button>
                <button id="confirm-image" class="btn btn-primary">插入</button>
            </div>
        </div>
    </div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        let currentFontSize = 16;

        function updatePreview() {
            const editorContent = document.getElementById('article-editor').innerHTML;
            document.getElementById('preview-content').innerHTML = editorContent;
        }

        function adjustFontSize(increase) {
            const editor = document.getElementById('article-editor');
            const elements = editor.querySelectorAll('p, h1, h2, h3, h4, h5, h6, .subtitle, .quote, .article-list li');
            
            if (increase) {
                currentFontSize += 1;
            } else {
                currentFontSize = Math.max(12, currentFontSize - 1);
            }
            
            elements.forEach(element => {
                const currentSize = parseInt(window.getComputedStyle(element).fontSize);
                const newSize = increase ? currentSize + 1 : Math.max(12, currentSize - 1);
                element.style.fontSize = `${newSize}px`;
            });
            
            updatePreview();
        }

        function exportToImage() {
            const element = document.getElementById('article-editor');
            
            html2canvas(element, {
                scale: 2,
                useCORS: true,
                allowTaint: true,
                backgroundColor: '#ffffff'
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '公众号文章截图.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            }).catch(error => {
                alert('导出图片时出现错误，请重试');
                console.error('导出错误:', error);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            updatePreview();
            
            document.getElementById('article-editor').addEventListener('input', updatePreview);
            
            document.querySelectorAll('.toolbar-btn[data-command]').forEach(button => {
                button.addEventListener('click', function() {
                    const command = this.getAttribute('data-command');
                    const value = this.getAttribute('data-value') || null;
                    document.execCommand(command, false, value);
                    updatePreview();
                    document.getElementById('article-editor').focus();
                });
            });
            
            document.getElementById('insert-image').addEventListener('click', function() {
                document.getElementById('image-modal').style.display = 'flex';
                document.getElementById('image-url').focus();
            });
            
            document.getElementById('cancel-image').addEventListener('click', function() {
                document.getElementById('image-modal').style.display = 'none';
            });
            
            document.getElementById('confirm-image').addEventListener('click', function() {
                const imageUrl = document.getElementById('image-url').value;
                const imageCaption = document.getElementById('image-caption').value;
                
                if (imageUrl) {
                    const editor = document.getElementById('article-editor');
                    const selection = window.getSelection();
                    
                    if (selection.rangeCount > 0) {
                        const range = selection.getRangeAt(0);
                        const img = document.createElement('img');
                        img.src = imageUrl;
                        img.alt = '文章图片';
                        img.className = 'article-image';
                        range.insertNode(img);
                        
                        if (imageCaption) {
                            const caption = document.createElement('p');
                            caption.className = 'image-caption';
                            caption.textContent = imageCaption;
                            range.setStartAfter(img);
                            range.insertNode(caption);
                        }
                        
                        range.setStartAfter(imageCaption ? caption : img);
                        range.setEndAfter(imageCaption ? caption : img);
                        selection.removeAllRanges();
                        selection.addRange(range);
                    }
                    
                    updatePreview();
                }
                
                document.getElementById('image-modal').style.display = 'none';
                document.getElementById('image-url').value = '';
                document.getElementById('image-caption').value = '';
            });
            
            document.getElementById('insert-divider').addEventListener('click', function() {
                insertElement('<div class="divider"></div>');
            });
            
            document.getElementById('insert-dot-divider').addEventListener('click', function() {
                insertElement(`<div class="divider-dot">
                    <span>●●●</span>
                </div>`);
            });
            
            document.getElementById('add-summary').addEventListener('click', function() {
                insertElement(`<div class="quote">
                    <p class="text-gray-800 font-medium mb-2">摘要</p>
                    <p class="text-gray-700">在这里添加文章摘要内容，简要介绍文章的核心观点和主要内容...</p>
                </div>`);
            });
            
            document.getElementById('add-guide').addEventListener('click', function() {
                insertElement(`<div class="quote">
                    <div class="guide-title font-bold mb-2">💡 小提示</div>
                    <p>在这里添加引导性内容或提示信息，可以引导读者进行下一步操作...</p>
                </div>`);
            });
            
            function insertElement(html) {
                const editor = document.getElementById('article-editor');
                const selection = window.getSelection();
                
                if (selection.rangeCount > 0) {
                    const range = selection.getRangeAt(0);
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = html;
                    
                    while (tempDiv.firstChild) {
                        const node = tempDiv.firstChild;
                        range.insertNode(node);
                        range.setStartAfter(node);
                        range.setEndAfter(node);
                    }
                    
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
                
                updatePreview();
                editor.focus();
            }
            
            document.getElementById('paragraph-spacing').addEventListener('input', function() {
                const value = this.value;
                document.querySelectorAll('#article-editor p').forEach(p => {
                    p.style.marginBottom = `${value}px`;
                });
                updatePreview();
            });
            
            document.getElementById('line-height').addEventListener('change', function() {
                const value = this.value;
                document.getElementById('article-editor').style.lineHeight = value;
                updatePreview();
            });
            
            document.getElementById('image-radius').addEventListener('input', function() {
                const value = this.value;
                document.querySelectorAll('#article-editor img.article-image').forEach(img => {
                    img.style.borderRadius = `${value}px`;
                });
                updatePreview();
            });
            
            document.getElementById('title-style').addEventListener('change', function() {
                const title = document.querySelector('#article-editor h1.article-title');
                if (!title) return;
                
                title.className = 'article-title';
                
                switch(this.value) {
                    case 'large':
                        title.style.fontSize = '32px';
                        break;
                    case 'bold':
                        title.style.fontWeight = '900';
                        break;
                    case 'light':
                        title.style.color = '#6b7280';
                        break;
                    default:
                        title.style.fontSize = '22px';
                        title.style.fontWeight = 'bold';
                        title.style.color = '#333';
                }
                updatePreview();
            });

            document.getElementById('zoom-in').addEventListener('click', function() {
                adjustFontSize(true);
            });

            document.getElementById('zoom-out').addEventListener('click', function() {
                adjustFontSize(false);
            });

            document.getElementById('export-image').addEventListener('click', exportToImage);
        });
    </script>
</body>
</html>